<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>统一身份认证</title>
        <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/3.2.26/vue.global.min.js"></script>
        <link type="text/css" rel="stylesheet" href="static/css/index.css">
    </head>
    <body>
        <div class="all">
            <div class = "header auto">
                <div class="logo1">
                    <img src="static/img/logo-full.png">
                </div>
                <div class="home">
                    <a href="http://www.muc.edu.cn" target="_blank">
                        <img src="static/img/home.png">
                        <span>学校主页</span>
                    </a>
                </div>
            </div>
            <div class="body" style="background-image: url('static/img/bp.png');">
                <div>
                    <div>
                        <img src="static/img/qcode.png">
                    </div>
                    <div>
                        <div>
                            身份验证
                        </div>
                        <div>
                            <img src="static/img/line1.png">
                        </div>
                        <div>
                            涉密不上网 上网不涉密
                        </div>
                        <div style="background-image: url('static/img/information_portal.png');"></div>
                        <div style="background-image: url('static/img/username.png');">
                            <input type="text" placeholder="用户名" v-model="username">
                        </div>
                        <div style="background-image: url('static/img/password.png');">
                            <input type="password" placeholder="密码" v-model="password">
                        </div>
                        <div>
                            <span>记住密码</span>
                            <input type="checkbox">
                        </div>
                        <button @click="login()">
                            账号登录
                        </button>
                        <div>
                            <a href="https://uc.muc.edu.cn/#/reset">忘记密码</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="footer" style="background-image: url('static/img/bottom1.png');">
            </div>
            <div class="footer2" style="background-image: url('static/img/bottom2.png');">
            </div>
            <div v-if="logined" id="overlay">
                <div id="overlay-content">
                    <div style="color: red; text-align: center; font-weight: bold; margin-bottom: 10px; font-size: 20px;">提醒：您已点击钓鱼短信页面</div>
                    <div class="content">您刚才可能在一封钓鱼短信中输入了敏感信息，这可能会导致安全风险。</div>
                    <div class="content">请注意防范钓鱼短信风险，钓鱼短信可能窃取用户敏感数据、账号密码、银行密码等信息，或诱导用户直接给对方银行账号转账等，具有极高风险。</div>
                    <div class="content" style="margin-top: 15px; font-weight: bold; border-bottom: 2px solid black; padding-bottom: 3px;">识别钓鱼短信的重要性：</div>
                    <div class="content">验证发件人的身份，谨慎打开附件或点击链接。</div>
                    <div class="content">注意短信内容，检查是否存在拼写错误或不正常的语法。</div>
                    <div class="content">使用安全软件进行实时扫描，确保您的系统受到保护。</div>
                    <div class="content">以此防诈演练提醒您时刻保持警惕，防范钓鱼短信的侵害。</div>
                </div>
            </div>
        </div>
        <script>
            const app = Vue.createApp({
                data() {
                    return {
                        username: "",
                        password: "",
                        logined: false
                    }
                },
                methods: {
                    login() {
                        console.log("login")
                        console.log(this.username)
                        console.log(this.password)
                        if (this.username=='') {
                            alert("请输入用户名！");
                            return 0;
                        } else if (this.password=='') {
                            alert("请输入密码！");
                        } else if (this.password.length<6) {
                            alert("请输入正确的密码！");
                        } else {
                            fetch("/login", {
                                cache: "no-cache",
                                method: "POST",
                                headers: {
                                    "Content-Type": "application/json"
                                },
                                body: JSON.stringify({
                                    username: this.username,
                                    password: this.password
                                })
                            }).then(response => {
                                return response.json();
                            }).then(data => {
                                alert(data.message);
                                if (data.status == "success") {
                                    this.logined = true;
                                }
                            }).catch(error => {
                                alert(error);
                            })
                        }
                    }
                }
            });
            app.mount(".all")
        </script>
    </body>
</html>
